<template>
  <Dialog
    :title="t('reviewApplyInfo.applyDetailDialogTitle')"
    v-model="dialogVisible"
    top="5vh"
    width="80%"
    max-height="70vh"
    :scroll="true"
  >
    <template v-if="reviewApplyInfo">
      <div class="mb-16px">
        <div class="title">{{ t('reviewApplyInfo.baseInfo.title') }}</div>
        <BaseInfo :data="reviewApplyInfo.baseInfo" :disabled="true" />
      </div>
      <div class="mb-16px">
        <div class="title">{{ t('reviewApplyInfo.readingStudentInfo.title') }}</div>
        <ReadingStudentInfo :data="reviewApplyInfo.studentCount" />
      </div>
      <div class="mb-16px">
        <div class="title">{{ t('reviewApplyInfo.projectList.title') }}</div>
        <ProjectTable :list="reviewApplyInfo.projectList" :disabled="true" />
      </div>
      <div class="mb-16px">
        <div class="title">{{ t('reviewApplyInfo.highLevelPaperList.title') }}</div>
        <HighLevelPaperTable :list="reviewApplyInfo.highLevelPaperList" :disabled="true" />
      </div>
      <div class="mb-16px">
        <div class="title">{{ t('reviewApplyInfo.monographList.title') }}</div>
        <MonographTable :list="reviewApplyInfo.monographList" :disabled="true" />
      </div>
      <div class="mb-16px">
        <div class="title">{{ t('reviewApplyInfo.patentList.title') }}</div>
        <PatentTable :list="reviewApplyInfo.patentList" :disabled="true" />
      </div>
      <div class="mb-16px">
        <div class="title">{{ t('reviewApplyInfo.awardList.title') }}</div>
        <AwardTable :list="reviewApplyInfo.awardList" :disabled="true" />
      </div>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import {
  AwardTable,
  BaseInfo,
  HighLevelPaperTable,
  MonographTable,
  PatentTable,
  ProjectTable,
  ReadingStudentInfo
} from '@/views/recruit/components/qualificationReview'
import {
  BaseInfoVO,
  ReviewApplyDetailInfo,
  ReviewApplyDetailRespVO,
  StudentCountVO
} from '@/api/recruit/reviewApply/types'
import { QualificationReviewDetailApi } from '@/api/recruit/qualificationReviewDetail'

defineOptions({ name: 'QualificationReviewApplyDetail' })

const { t } = useI18n() // 国际化

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false)
const reviewApplyInfo = ref<ReviewApplyDetailInfo>() // 申请信息
// 基本信息
const userBaseInfo: BaseInfoVO = {
  realName: '',
  gender: '1',
  birthday: '',
  researchGroup: '',
  workTel: '',
  email: '',
  phone: '',
  technicalPosition: '',
  enrollmentMajor: '',
  highestDegree: '',
  mainAcademic: '',
  researchDirection: ''
}
// 学生数量json
const studentCount: StudentCountVO = {
  firstMaster: 0,
  firstDoctor: 0,
  secondMaster: 0,
  secondDoctor: 0
}

// 解析申请信息
const parseApplyInfo = (applyData: ReviewApplyDetailRespVO) => {
  // console.log('parseApplyInfo -> applyData', applyData)
  const parseJSON = (data: string, defaultValue: any) => {
    try {
      return JSON.parse(data)
    } catch {
      return defaultValue
    }
  }
  // 申请信息为空时，设置默认值
  if (!applyData) {
    resetData()
    return
  }
  // 申请信息为空对象时，设置为空字符串 使后面解json时走异常处理条件
  if (applyData.baseInformation === '{}') {
    applyData.baseInformation = ''
  }
  // 学生数量为空对象时，设置为空字符串 使后面解json时走异常处理条件
  if (applyData.studentCount === '{}') {
    applyData.studentCount = ''
  }
  reviewApplyInfo.value = {
    baseInfo: parseJSON(applyData.baseInformation, userBaseInfo),
    studentCount: parseJSON(applyData.studentCount, studentCount),
    projectList: parseJSON(applyData.projects, []),
    highLevelPaperList: parseJSON(applyData.paper, []),
    monographList: parseJSON(applyData.monograph, []),
    patentList: parseJSON(applyData.patent, []),
    awardList: parseJSON(applyData.award, [])
  }
}

const resetData = () => {
  reviewApplyInfo.value = {
    baseInfo: userBaseInfo,
    studentCount: studentCount,
    projectList: [],
    highLevelPaperList: [],
    monographList: [],
    patentList: [],
    awardList: []
  }
}

// 查询申请信息
const getDetail = async (detailId: string) => {
  formLoading.value = true
  try {
    const data = await QualificationReviewDetailApi.getReviewDetail(detailId)
    parseApplyInfo(data)
  } finally {
    formLoading.value = false
  }
}

const open = async (detailId: string) => {
  reviewApplyInfo.value = undefined
  dialogVisible.value = true
  await getDetail(detailId)
}

defineExpose({
  open
})
</script>

<style scoped lang="scss">
.title {
  margin-bottom: 8px;
  font-size: 14px;
  height: 24px;
  line-height: 24px;
  font-weight: bold;

  &::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 12px;
    line-height: 24px;
    background-color: var(--el-color-primary);
    margin-right: 5px;
  }
}
</style>
